<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-04-26 18:36:23
 * @LastEditTime : 2023-05-11 10:41:35
-->
<script lang="ts" setup name="IkTitle">
import type { PropType } from 'vue'

defineProps({
  title: {
    type: String,
    default: ''
  },
  subTitle: {
    type: Array as PropType<{ slot: string; title: string; }[]>,
    default: () => []
  },
  margin: {
    type: String,
    default: '16px 0'
  }
})
</script>

<template>
  <div class="ik-flow-title">
    <!-- 顶部标题 -->
    <p class="header">{{ title }}</p>
    <div>
      <template v-for="item in subTitle" :key="item.slot">
        <!-- 次标题 -->
        <p class="sub-title" :style="{ margin }">{{ item.title }}</p>
        <!-- slot命名为传入slot名称 -->
        <div class="content">
          <slot :name="item.slot"></slot>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ik-flow-title {
  text-align: left;
  color: var(--el-text-color-regular);
  padding-left: 8px;

  p {
    padding: 0;
    margin: 0;
  }

  .header {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--el-border-color);
    padding-bottom: 8px;
  }

  div {
    font-size: 14px;

    & > .sub-title {
      border-left: 5px solid var(--el-color-primary);
      display: flex;
      align-items: center;
      padding-left: 8px;
      font-weight: 600;
      line-height: 14px;
    }

    .content {
      padding-left: 8px;
      margin-bottom: 8px;

      .el-checkbox {
        height: 40px;
      }
    }
  }
}
</style>
